<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<title>前端开发团队</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
	<!-- 外联的CSS文件-->
	<link rel="stylesheet" href="css/bootstrap.css"/> 
	<link rel="stylesheet" href="css/bootstrap-responsive.css"/> 
	<link rel="stylesheet" href="css/docs.css"/> 


	<script type="text/javascript" src="js/SyntaxHighlighter/scripts/XRegExp.js"></script>
	<script type="text/javascript" src="js/SyntaxHighlighter/scripts/shCore.js"></script>
	<script type="text/javascript" src="js/SyntaxHighlighter/scripts/shAutoloader.js"></script>
	<link type="text/css" rel="stylesheet" href="js/SyntaxHighlighter/styles/shCore.css"/>
	<link type="text/css" rel="Stylesheet" href="js/SyntaxHighlighter/styles/shThemeDefault.css" />




	<style>
	body, input, button, textarea {
		font-family: "Microsoft Yahei","微软雅黑",Tahoma,Arial,Helvetica,STHeiti,sans-serif;
	  font-weight: normal;
	}
	div.prettyprint{
		border-radius: 4px 4px 4px 4px;
		display: block;
		font-size: 1em;
		line-height: 20px;
		margin:10px 0px;
	}
	.syntaxhighlighter .container:before, .container:after {
		content: none;
	}
	.syntaxhighlighter .gutter .line {
		 border-right: 0px solid #6CE26C !important
	}
	.syntaxhighlighter,.syntaxhighlighter .line.alt2,.syntaxhighlighter .line.alt1 {
		background: none !important;
	}
	</style> <!--内联 css 代码-->
    <link href="css/prettify.css" rel="stylesheet">
    <link href="css/bootstro.css" rel="stylesheet">
</head>

<body>
<!-- Navbar ================================================== -->
<div class="navbar navbar-inverse navbar-fixed-top">
	<div class="navbar-inner">
		<div class="container">
			<a class="brand" href="index.html">前端开发团队</a>
		
			<div class="nav-collapse collapse">
				<ul class="nav">
					<li class="">
						<a href="index.html">首页</a>
					</li>
					<li class="">
						<a class="bootstro" href="getting-started.html">起步</a>
					</li>
					<li class="active">
						<a class="bootstro" href="scaffolding.html">脚手架</a>
					</li>
					<li class="">
						<a class="bootstro" href="base-css.html">基本的CSS样式</a>
					</li>
					<li class="">
						<a class="bootstro" href="components.html">组件</a>
					</li>
					<li class="">
						<a class="bootstro" href="api.html">API手册</a>
					</li>
					<li class="">
						<a class="bootstro" href="docs.html">经验交流</a>
					</li>
					<li class="">
						<a class="bootstro" href="tools.html">工具</a>
					</li>
					<li class="">
						<a class="bootstro" href="about.html">关于</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>
    

<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
  <div class="container">
    <h1>脚手架</h1>
    <p class="lead">建立基本的系统、布局、组件和规范。</p>
  </div>
</header>

  <div class="container">
    <!-- Docs nav
    ================================================== -->
    <div class="row">
      <div class="span3 bs-docs-sidebar">
        <ul class="nav nav-list bs-docs-sidenav affix-top">
          <li><a href="#p1"><i class="icon-chevron-right"></i> 全局设置</a></li>
          <li><a href="#p2"><i class="icon-chevron-right"></i> 布局</a></li>
		  <li><a href="#p3"><i class="icon-chevron-right"></i> 命名与规范</a></li>


        </ul>
      </div>
      <div class="span9">
			<section id="p1">
					  <div class="page-header">
						<h1>全局设置</h1>
					  </div>
						<h3>必须使用HTML5文档类型</h3>
						<div class="prettyprint linenums">
						<script type="syntaxhighlighter" class="brush: html; ">
<![CDATA[
<!DOCTYPE html>
<html lang="zh-CN">
	...
</html>
]]>
 </script>
					</div>

					<h3>编码统一采用UTF8</h3>
					<div class="prettyprint linenums">
						<script type="syntaxhighlighter" class="brush: html; ">
<![CDATA[
<meta charset="utf-8">
]]>
 </script>
					</div>
			

					<h3>重置样式</h3>
					<p>我们使用<code>reset.css</code>方式对html自带初始样式进行统一，通常我们会将<code>reset.css</code>合并到代码<code>common.css</code>中，大家可以根据具体项目需要进行整合。</p>
<div class="prettyprint linenums">
<script type="syntaxhighlighter" class="brush: css; ">
<![CDATA[
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, code, em, img, q, small, strong, dd, dl, dt, li, ol, ul, fieldset, form, label, table, tbody, tr, th, td, input {
    margin: 0;
    padding: 0;
}
body,button, input, select, textarea /* for ie */ {
    font: 12px/1.5 tahoma, arial, \5FAE\8F6F\96C5\9ED1,\5B8B\4F53 sans-serif; 
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; } 
code, kbd, pre, samp { font-family: tahoma, arial, \5FAE\8F6F\96C5\9ED1,\5B8B\4F53 sans-serif;} 
small { font-size: 12px; } 

ul, ol { list-style: none; }

a { cursor: pointer;text-decoration: none; }

sup { vertical-align: text-top; } 
sub { vertical-align: text-bottom; }

legend { color: #000; }
fieldset, img { border: 0; }
button, input, select, textarea { font-size: 100%; }

table { border-collapse: collapse; border-spacing: 0; }
.clearfix:after { content: '\20'; display: block; height: 0; clear: both; }
.clearfix{ *zoom: 1; }
]]>
 </script>
</div>
		<p>其中<code>\5FAE\8F6F\96C5\9ED1</code> 表示“微软雅黑” <code>\5B8B\4F53</code> 表示“宋体”</p>

		<p>下载样式：SVN:\\10-前端开发\03-样式库\reset.css</p>

	</section>
	<section id="p2">
		  <div class="page-header">
			<h1>布局</h1>
		  </div>
		  <h3>常用布局</h3>
		  <p>在我们的项目通常使用以下布局方式</p>
		  <img src="images/scaffolding/layout-normal.png" width="300" height="373" alt="" />
          <table class="table table-bordered">
			<tbody>
			<tr>
				<th width="20%">名称</th>
				<th>说明</th>
			</tr>
			<tr>
				<td>wrap</td>
				<td>代替body，方便定义文档的宽度高度，不污染body属性（可以省略）</td>
			</tr>
			<tr>
				<td>header</td>
				<td>文档头部信息</td>
			</tr>
			<tr>
				<td>nav</td>
				<td>文档导航信息</td>
			</tr>
			<tr>
				<td>main</td>
				<td>文档主体部分</td>
			</tr>
			<tr>
				<td>aside</td>
				<td>文档旁白与侧边栏</td>
			</tr>
			<tr>
				<td>footer</td>
				<td>文档尾部信息</td>
			</tr>
			</tbody>
		  </table>
		  <p class="text-error">除wrap与main外，其他都是html5支持的语义化元素，以上所有元素通常以id或class命名的形式在文档中出现</p>
		  <h3>HTML5 标准语义化布局</h3>
		  <p>如果你是HTML5的狂热追求者，我们也不反对您在项目中使用基于HTML5的语义化元素，但需要注意的是在非现代浏览器中需要增加元素标签支持。</p>
<div class="prettyprint linenums">
<script type="syntaxhighlighter" class="brush: html; ">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</script>
</div>
		  <p>本地获取：SVN\\10-前端开发\02-组件库\other\html5shiv</p>
		  <p>网络上的布局： <a href="images/scaffolding/layout-html5-1.png" target="_blank">参考1</a> <a href="images/scaffolding/layout-html5-2.jpg" target="_blank">参考2</a></p>
		  <p>对于section(区段)与article(文章)的使用没有严格规约，个人认为应该这样处理：</p>
		  <ul>
				<li><code>section</code>来代替以前任意乱用的<code>div</code></li>
				<li><code>article</code>更加适合网页中文章的结构(包含完整的头中尾)</li>
		  </ul>
		  <p>在我们的项目中更加推荐使用<code>section</code>来代替之前的<code>main</code>部分</p>
	</section>
    <section id="p3">
		 <div class="page-header">
			<h1>命名与规范</h1>
		  </div>
		<h3>HTML 规范</h3>
		<ul>
			<li>必须遵循<a href="http://www.w3cn.org/article/step/index.html" target="_blank">Web标准开发</a></li>
		</ul>
		<h3>CSS 规范</h3>
		<ul>
			<li>采用语义化明确的英文单词。比如：<code>header</code>、<code>container</code>、<code>box</code>、<code>current</code>、<code>seleted</code>、<code>active</code></li>
			<li>多个单个组成的命名，建议采用"-"进行分割。比如:<code>page-header</code>、<code>main-wrapper</code></li>
			<li>尽量减少继承的使用，尽量采用Class选择器。比如:<code>.header .nav div{}</code>建议在div上增加样式<code>.header-nav-div</code></li>
			<li>给特定用途元素添加合理的前缀和后缀。比如:<code>-btn</code>、<code>-icon</code>、<code>-wrapper</code>、<code>rtc-video-</code></li>
			<li>引用背景图片时，URL中使用双引号(")。比如:<code>background-image:url("images/photo.jpg")</code></li>
			<li>含有left/right/top/bottom/属性 尽量合并编写。比如:<code>padding:1px 2px 3px 4px</code></li>
			<li>对于低版本浏览器不支持的伪类，应该采用相同名称的命名方式扩展。比如:<code>.hover</code>、<code>.first</code></li>
			<li>给样式增加合理的注释</li>
			<li>尽量避免CSS表达式的使用</li>
		</ul>
		<p>关于兼容性可以参考：<a href="p/bsie.html">浏览器兼容专题</a></p>
		<h3>JavaScript 规范</h3>
		<ul>
			<li>给应用添加合理的命名空间</li>
			<li>代码行必须使用";"结束</li>
			<li>主要代码部分编写合理的代码注释</li>
			<li>使用MVC编程思想，尽量使用<a href="#todo">面向对象的编程方式</a>开发</li>
		</ul>

		<p>此处省略1000字...</p>
	</section>

    </div>

  </div>
</div>
    <!-- Footer
    ================================================== -->
    <footer class="footer">
      <div class="container">
        <p>苏州科达科技股份有限公司 - 前端开发团队</p>
      </div>
    </footer>

<script type="text/javascript">
SyntaxHighlighter.autoloader(
	'applescript			js/SyntaxHighlighter/scripts/shBrushAppleScript.js',
	'actionscript3 as3		js/SyntaxHighlighter/scripts/shBrushAS3.js',
	'bash shell				js/SyntaxHighlighter/scripts/shBrushBash.js',
	'coldfusion cf			js/SyntaxHighlighter/scripts/shBrushColdFusion.js',
	'cpp c					js/SyntaxHighlighter/scripts/shBrushCpp.js',
	'c# c-sharp csharp		js/SyntaxHighlighter/scripts/shBrushCSharp.js',
	'css					js/SyntaxHighlighter/scripts/shBrushCss.js',
	'delphi pascal			js/SyntaxHighlighter/scripts/shBrushDelphi.js',
	'diff patch pas			js/SyntaxHighlighter/scripts/shBrushDiff.js',
	'erl erlang				js/SyntaxHighlighter/scripts/shBrushErlang.js',
	'groovy					js/SyntaxHighlighter/scripts/shBrushGroovy.js',
	'java					js/SyntaxHighlighter/scripts/shBrushJava.js',
	'jfx javafx				js/SyntaxHighlighter/scripts/shBrushJavaFX.js',
	'js jscript javascript	js/SyntaxHighlighter/scripts/shBrushJScript.js',
	'perl pl				js/SyntaxHighlighter/scripts/shBrushPerl.js',
	'php					js/SyntaxHighlighter/scripts/shBrushPhp.js',
	'text plain				js/SyntaxHighlighter/scripts/shBrushPlain.js',
	'py python				js/SyntaxHighlighter/scripts/shBrushPython.js',
	'ruby rails ror rb		js/SyntaxHighlighter/scripts/shBrushRuby.js',
	'scala					js/SyntaxHighlighter/scripts/shBrushScala.js',
	'sql					js/SyntaxHighlighter/scripts/shBrushSql.js',
	'vb vbnet				js/SyntaxHighlighter/scripts/shBrushVb.js',
	'xml xhtml xslt html	js/SyntaxHighlighter/scripts/shBrushXml.js'
);
SyntaxHighlighter.all();
</script>

</body>
</html>